<template>
	<div>
		<aplid-base-crud ref="crud" class="w-100" layout="card" v-bind="{ ...baseConfig, ...$attrs }">
			<template v-slot:column="{ row }">
				<div class="user-card">
					<p class="text-title">
						<div>
							<span class="mr8">{{ row.belongRoom }}室（{{ row.bedType }}人间室）{{ row.bed }}</span>
						<el-tag class="text-tag" v-if="row.bedTypeLabel">{{ row.bedTypeLabel }}</el-tag>
						</div>
						<span @click="openQrcode(row)">
							<!-- <el-icon :size="20"><Notification /></el-icon> -->
							<img style="width: 20px;" src="https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1709197777059_3bfa6d9c.png" alt="" srcset="" />
						</span>
					</p>
					<div class="flex gap-10 mt10" v-if="row.checkinDate">
						<img src="@/assets/imgs/default_header_logo.webp" alt="" class="icon-img" />
						<div class="text-content flex1">
							<p>
								<span class="text-bold f18 mr8">{{ row.oldmanName }}</span>
								<span class="f12 mr8">{{ row.genderLabel }}</span>
								<span class="f12">{{ row.age }}岁</span>
							</p>
							<el-button type="primary" size="small" @click="handleShowDetail(row)">档案</el-button>
							<p class="f12">入住时间：{{ row.checkinDate }}</p>
						</div>
					</div>
					<div v-else style="height: 150px">
						<el-empty :image="defaultLoading" :image-size="50" description="暂无人居住" />
					</div>
					<div class="icon-qrcode"></div>
				</div>
			</template>
		</aplid-base-crud>
		<aplid-dialog title="床态图-二维码" v-model="qrcodeShow" width="220">
			<div class="qr_code_center">
				<vue-qrcode :value="qrcodeValue" :size="10" :width="200"></vue-qrcode>
			</div>
		</aplid-dialog>
		<oldmanArchives ref="archivesEl"></oldmanArchives>
	</div>
</template>

<script setup lang="ts">
import { baseConfig } from './config'
import defaultLoading from '@/assets/imgs/empty.webp'

import oldmanArchives from './oldmanArchives/index.vue'
import { Notification } from '@element-plus/icons-vue'
import VueQrcode from 'vue-qrcode'

let qrcodeShow = ref(false)
let qrcodeValue = ref('')
let copyRow: any = ref({})
const archivesEl = ref(null)
const handleShowDetail = (row) => {
	archivesEl.value?.getBaseInfo(row.idCard)
}
const openQrcode = (row) => {
	qrcodeShow.value = true
	copyRow.value = row
	//
	let host = ''
	if (window.location.hostname == 'localhost') {
		host = 'http://192.168.2.22' + ':' + '5173'
	} else {
		host = window.location.protocol + '//' + window.location.host
	}
	qrcodeValue.value = `${host}/apld-one-process/#/pagesInstitutionalSecurity/bedStatusImage/bedStatusImage?id=${row.id}`
}
</script>

<style scoped lang="scss">
.user-card {
	background: #fff;
	border-radius: 10px;
	padding: 10px;
	width: 100%;
	min-height: 180px;
	position: relative;
	&:hover {
		cursor: pointer;
	}
	.text-title {
		font-family: 'Microsoft YaHei Bold';
		font-weight: 700;
		font-size: 14px;
		text-align: left;
		color: #1c1c28;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}

	.icon-img {
		width: 99px;
		height: 140px;
		border-radius: 6px;
		background: #c7c7c7;
		object-fit: cover;
	}
	.icon-qrcode {
		position: absolute;
		right: 10px;
		top: 10px;
	}
	.text-content {
		line-height: 30px;
	}
}
.qr_code_center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
</style>
